<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>好友管理</title>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <script src="../common/header.js"></script>
    <!-- 内容主体区域 -->
    <div id="LAY_app_body">
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body">
                            <!--检索项-->
                            <div class="layui-form">
                                <div class="layui-inline">
                                    <a href="friend_add.html" class="layui-btn layui-btn-sm">添加好友</a>
                                </div>
                                <div class="layui-inline">
                                    <div class="layui-input-inline">
                                        <input type="text" name="ourWxName" id="ourWxName" lay-verify="ourWxName"
                                               placeholder="昵称/手机号/微信号"
                                               autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <div class="layui-input-inline">
                                        <input type="text" name="wxId" id="wxId" lay-verify="wxId" placeholder="微信号"
                                               autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <div class="layui-input-inline">
                                        <input type="text" name="name" id="name" lay-verify="name" placeholder="员工账户"
                                               autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">添加时间</label>
                                    <div class="layui-input-inline" style="width: 140px;">
                                        <input type="text" name="start" id="datefrom" lay-verify="start"
                                               placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                                    </div>
                                    <div class="layui-input-inline" style="width: 140px;">
                                        <input type="text" name="end" id="dateto" lay-verify="end"
                                               placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <div class="layui-input-inline">
                                        <select id="source" lay-verify="source" name="source" style="layui-input-inline"
                                                onchange="reloadList()">
                                            <option value="0">请选择</option>
                                            <option value="10">原始好友</option>
                                            <option value="11">爆粉</option>
                                            <option value="12">单独添加</option>
                                            <option value="13">对方主动添加</option>
                                        </select>
                                    </div>
                                </div>
                                <button class="layui-btn layui-btn-xs" onclick="reloadList();">搜索</button>
                                <button class="layui-btn layui-btn-xs layui-btn-primary" onclick="reloadList(true);">
                                    重置
                                </button>
                            </div>
                            <!--表格内容区域-->
                            <table id="LAY-material-group-manage" lay-filter="LAY-material-group-manage"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="barDemo">
    <button class="layui-btn layui-btn-xs" lay-event="chatRecord">聊天记录</button>
    <button class="layui-btn layui-btn-xs layui-btn-normal" lay-event="wechatMoments">朋友圈</button>
    <button class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delRecord">删除</button>
</script>
<script>
    var reloadList;
    var getSearchData;
    layui.use(['table'], function (table) {
        var $ = layui.$
        table = layui.table

        getSearchData = function () {
            var source = $('#source').find("option:selected").val();
            var start = $('#datefrom').val();
            var end = $('#dateto').val();
            var name = $('#name').val();
            var ourWxName = $('#ourWxName').val();
            var wxId = $('#wxId').val();
            return {
                wxId: wxId,
                source: parseInt(source),
                start: parseInt(new Date(start).getTime()),
                end: parseInt(new Date(end).getTime()),
                ourWxName: ourWxName,
                name: name
            }
        }

        table.render({
            elem: '#LAY-material-group-manage'
            , url: HOST + 'api/v1/wxfriends' //数据接口
            , headers: {Authorization: layui.data("TOKEN").TOKEN}
            , contentType: 'application/json'
            , id: 'LAY-material-group-manage'
            , page: true //开启分页
            , method: "POST"
            , where: getSearchData()
            , cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                , {field: 'wxId', title: '微信号/ID', width: 200}
                , {
                    field: 'avatar', title: '头像', width: 220, templet: function (row) {
                        if (row.avatar) {
                            return '<img src="' + row.avatar + '" style="width: 30px;height:30px">'
                        } else {
                            return '<img src="../assets/images/default_head.jpeg" style="width: 30px;height:30px">'
                        }
                    }
                }
                , {field: 'nick_name', title: '名字', width: 220}
                , {field: 'remark', title: '备注', width: 200}
                , {field: 'origin', title: '好友来源', width: 100}
                , {fixed: 'right', width: 270, align: 'center', toolbar: '#barDemo'}
            ]]
            , error: function (err) {
                if (err.code === 20002) {
                    layer.open({
                        type: 1,
                        title: false,//不显示标题栏
                        closeBtn: false,
                        area: '300px;',
                        shade: 0.8,
                        id: 'LAY_layuipro', //设定一个id，防止重复弹出
                        btn: ['重新登录'],
                        btnAlign: 'c',
                        moveType: 1,
                        content: '<div style="padding: 60px 30px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">您的登录信息已失效，请重新登录！</div>',
                        success: function (layero) {
                            var btn = layero.find('.layui-layer-btn');
                            btn.find('.layui-layer-btn0').attr({
                                href: '../login/login.html'
                            });
                        }
                    });
                } else {
                    layer.msg(err.msg, {offset: '45vh', icon: 5, time: 2000});
                }
            }
        });

        //监听头工具栏
        table.on('tool(LAY-material-group-manage)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）

            if (layEvent === 'delRecord') {  // 删除素材分组
                layer.confirm('确认要删除此好友吗？', function (index) {
                    service.delete('api/v1/wxfriend/' + data.id).then((response) => {
                        if (response.code === 200) {
                            layer.msg('删除成功', {offset: '45vh', icon: 1, time: 2000});
                            table.reload('LAY-material-group-manage', {
                                where: getSearchData()//设定异步数据接口的额外参数，任意设
                                , page: {
                                    curr: 1 //重新从第 1 页开始
                                }
                            });
                        } else {
                            layer.msg(response.msg, {offset: '45vh', icon: 5, time: 2000});
                        }
                    }).catch((err) => {
                        layer.msg(err.msg, {offset: '45vh', icon: 5, time: 2000});
                    })
                });

            } else if (layEvent === 'chatRecord') {
                service.post('api/v1/wxinfo/syncmsg', {id: data.id, page: 1}).then((res) => {
                    if (res.code === 0) {
                        layer.open({
                            type: 1
                            , id: 'layerDemo'
                            , content: '<div style="padding: 20px 100px;">聊天记录待完善</div>'
                            , btn: '关闭全部'
                            , btnAlign: 'c' //按钮居中
                            , shade: 0 //不显示遮罩
                            , yes: function () {
                                layer.closeAll();
                            }
                        });
                    } else {
                        layer.msg(res.msg, {offset: '45vh', icon: 5, time: 2000});
                    }
                }).catch((err) => {
                    layer.msg(err.msg, {offset: '45vh', icon: 5, time: 2000});
                })
            } else if (layEvent === 'wechatMoments') {
                service.post('api/v1/wxinfo/viewfriendcircle', {id: data.id, page: 1}).then((res) => {
                    if (res.code === 0) {
                        layer.open({
                            type: 1
                            , id: 'layerDemo'
                            , content: '<div style="padding: 20px 100px;">朋友圈待完善</div>'
                            , btn: '关闭全部'
                            , btnAlign: 'c' //按钮居中
                            , shade: 0 //不显示遮罩
                            , yes: function () {
                                layer.closeAll();
                            }
                            , success: function () {

                            }
                        });
                    } else {
                        layer.msg(res.msg, {offset: '45vh', icon: 5, time: 2000});
                    }
                }).catch((err) => {
                    layer.msg(err.msg, {offset: '45vh', icon: 5, time: 2000});
                })
            }
        });

        reloadList = function (reset, stayPage) {
            if (reset == true) {
                $('#source').find('option:first').attr("selected", false);
                $('#source').find('option:first').attr("selected", true);
                $('#datefrom').val('');
                $('#dateto').val('');
                $('#name').val('');
                $('#ourWxName').val('');
                $('#wxId').val('');
            }
            if (stayPage == true) {
                table.reload('LAY-material-group-manage', {
                    where: getSearchData()
                });
            } else {
                table.reload('LAY-material-group-manage', {
                    where: getSearchData()
                    , page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
            }
        };
    });
</script>
</body>
</html>
